<template>
  <div class="clearfix">
    <!-- 底部导航 -->
    <nav class="mui-bar-tab bottom" v-show="isShowFooter">
      <router-link class="mui-tab-item" to="/homePage">
				<span class="mui-icon">
                <img class="img1"  :src="tab==='homePageOn'?'static/imgs/icon_index_1.png':'static/imgs/icon_index_2.png'">
                 </span>
        <span class="mui-tab-label" :class="tab==='homePageOn'?'btmcolor':''">首页</span>
      </router-link>
      <a class="mui-tab-item" @click="upload()">
				<span class="mui-icon">
                <img src="static/icon_pc/icon/upload-off.png" style="width: 0.5rem;margin-bottom: -0.3rem">
                 </span>
        <span class="mui-tab-label">上传黑名单</span>
      </a>
      <a class="mui-tab-item" @click="jumpUserCenter()">
				<span class="mui-icon">
                <img class="img1"  :src="tab==='personalCenterOn'?'static/imgs/icon_me_1.png':'static/imgs/icon_me_2.png'" alt="">
                </span>
        <span class="mui-tab-label" :class="tab==='personalCenterOn'?'btmcolor':''">我的</span>
      </a>
    </nav>
  </div>
</template>

<script>
  // import publicMethod from '@/js/publicMethod'
  import {Base64} from 'js-base64';

  export default {
    data() {
      return {
        tab: 'homePageOn',
        myPageType:'personalCenter',
        terminalType:'',
        isShowFooter:true,
      }
    },
    created() {
      switch (this.$route.path) {
        case '/Personalcenter':
        case '/personalcenter':
        case '/corporatecenter':
          this.tab = 'personalCenterOn';
              break
      }
      setTimeout(() => {
        this.getUserType();
      }, 500);
      this.getTerminalType();
      this.heightChange();
    },
    watch:{
      $route(to,from){
        console.log('++++++++++');
        console.log(from);
        if(to.path==='/homePage'){
          this.tab = 'homePageOn';
        }else {
          this.tab = 'personalCenterOn';
        }
      }
    },
    methods: {
      upload() {   //我要上传
        if (this.userJudgment()) {
          if (this.$store.state.userType == '1') {
            this.$router.push({
              path: "./Enterprise",
              query: {
                fromHomePage: true,
              }
            });
          } else {
            this.$router.push('/blackname')
          }
        }
      },
      userJudgment() {   //用户token以及是否绑定手机号的判断
        // let getUserInfo = JSON.parse(localStorage.setBindPhoneParams);
        if (this.$store.state.isBindPhone && localStorage.token) {
          return true
        } else {
          this.$router.push('/bindphone');
        }
        return false;
      },
      jumpUserCenter() {
        if (this.$store.state.isBindPhone) {
          this.$router.push(this.myPageType === 'personalCenter' ? '/personalcenter' : '/corporatecenter');
        } else {
          this.$router.push('/bindphone');
        }
      },
      getQueryString(url, ref) {  //获取地址栏参数
        var str = url.substr(url.indexOf('?') + 1);
        if (str.indexOf('&') != -1) {
          var arr = str.split('&');
          for (let item of arr) {
            if (item.split('=')[0] == ref) return item.split('=')[1];
          }
        } else {
          return url.substr(url.indexOf('=') + 1)
        }
      },

      getTerminalType(){  //获取浏览器类型
        let ua = window.navigator.userAgent, app = window.navigator.appVersion;
        // alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
        if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {        // ios端
          this.terminalType = 'ios';         
        } else if (ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) { // android端  
          this.terminalType = 'android';
        }
        if (ua.match(/MicroMessenger/i) == 'MicroMessenger') {        // 微信浏览器        
          // alert('微信浏览器');
        }

      },
      heightChange() {   //监听键盘弹出，隐藏底部
        // alert('启用监听事件')
        //获取当前页面高度
        let winHeight = $(window).height();
        let that = this;
        $(window).resize(function(){
          // alert($(this).height());
          var thisHeight=$(this).height();
          if(winHeight - thisHeight >50){
            //窗口发生改变(大),故此时键盘弹出
            //当软键盘弹出，在这里面操作
            // alert('键盘弹出');
            that.isShowFooter = false;
          }else{
            //窗口发生改变(小),故此时键盘收起
            //当软键盘收起，在此处操作
            // alert('键盘收起');
            that.isShowFooter = true;
          }
        });
      },
      getUserType(){  //获取用户登录类型
        this.$http.get('api/User/index').then(response=>{
          console.log('用户类型', this.$store.state.userType);
          this.$store.commit('setUserType', response.data.type);
          if(response.data.type == 1) {
            this.myPageType = 'personalCenter';
          } else {
            this.myPageType = 'corporateCenter';
          }
        })
      },
    }
  }
</script>

<style>
  .bottom {
    position: fixed;
    /*z-index: 10;*/
    /*left: 0px;*/
    /*bottom: 0rem;*/
    /*border-bottom: 0;*/
    /*border-top: .001rem solid #E2E2E2;*/
    background-color: #FFFFFF;
  }

  /* 底部导航 */
  .mui-bar-tab {
    /* padding: .1rem 0; */
  }

  .mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label {
    padding-top: .16rem;
    font-size: .24rem;
  }

  .mui-bar-tab {
    height: .98rem;
    border-top: .01rem solid #E2E2E2;
  }

  .img1 {
    width: .38rem;
    height: .37rem;
    margin-top: 10px !important;
  }

  .btmcolor {
    color: #0085F0;
  }
</style>
